import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: false,
  include: ['./src/**/*.{tsx,jsx}'],
  exclude: [],
  outdir: 'styled-system',
  jsxFramework: 'react',
  theme: {
    tokens: {
      colors: {
        transparent: { value: 'transparent' },
        white: { value: '#fff' },
        black: { value: '#000' },

        gray50: { value: '#f8fafc' },
        gray100: { value: '#f1f5f9' },
        gray200: { value: '#e2e8f0' },
        gray300: { value: '#cbd5e1' },
        gray400: { value: '#94a3b8' },
        gray500: { value: '#64748b' },
        gray600: { value: '#475569' },
        gray700: { value: '#334155' },
        gray800: { value: '#1e293b' },
        gray900: { value: '#0f172a' },

        red50: { value: '#fef2f2' },
        red100: { value: '#fee2e2' },
        red200: { value: '#fecaca' },
        red300: { value: '#fca5a5' },
        red400: { value: '#f87171' },
        red500: { value: '#ef4444' },
        red600: { value: '#dc2626' },
        red700: { value: '#b91c1c' },
        red800: { value: '#991b1b' },
        red900: { value: '#7f1d1d' },

        blue50: { value: '#f0f9ff' },
        blue100: { value: '#e0f2fe' },
        blue200: { value: '#bae6fd' },
        blue300: { value: '#7dd3fc' },
        blue400: { value: '#38bdf8' },
        blue500: { value: '#0ea5e9' },
        blue600: { value: '#0284c7' },
        blue700: { value: '#0369a1' },
        blue800: { value: '#075985' },
        blue900: { value: '#0c4a6e' },

        green50: { value: '#f0fdf4' },
        green100: { value: '#dcfce7' },
        green200: { value: '#a7f3d0' },
        green300: { value: '#6ee7b7' },
        green400: { value: '#34d399' },
        green500: { value: '#10b981' },
        green600: { value: '#059669' },
        green700: { value: '#047857' },
        green800: { value: '#065f46' },
        green900: { value: '#14532d' },

        yellow50: { value: '#fefce8' },
        yellow100: { value: '#fef9c3' },
        yellow200: { value: '#fef08a' },
        yellow300: { value: '#fde047' },
        yellow400: { value: '#facc15' },
        yellow500: { value: '#eab308' },
        yellow600: { value: '#ca8a04' },
        yellow700: { value: '#a16207' },
        yellow800: { value: '#854d0e' },
        yellow900: { value: '#713f12' },
      },
      fonts: {
        sans: {
          value: ['Arial', 'Tahoma', 'Geneva', 'sans-serif'].join(','),
        },
      },
      fontSizes: {
        body: { value: '16px' },
        h1: { value: '42px' },
        h2: { value: '36px' },
        h3: { value: '30px' },
        h4: { value: '24px' },
      },
      fontWeights: { normal: { value: '400' }, bold: { value: '600' } },
      radii: {
        none: { value: '0' },
        sm: { value: '2px' },
        md: { value: '4px' },
        lg: { value: '8px' },
      },
      spacing: {
        none: { value: '0' },
        xxs: { value: '4px' },
        xs: { value: '8px' },
        sm: { value: '16px' },
        md: { value: '24px' },
        lg: { value: '32px' },
        xl: { value: '48px' },
      },
    },
  },
  globalCss: {
    '*': {
      fontFamily: 'Inter',
      margin: '0',
    },
    a: {
      color: 'inherit',
      textDecoration: 'none',
    },
  },
})
